<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<view style="text-align: left">
			<view style="width: 96%;height: 40px;background-color: rgb(248, 248, 248);display: flex;justify-content: space-between;line-height: 40px;text-align: center;margin: 20px auto;">
				<view class="zhushubox" :style="	index == 1	? ' background: #2196F3;width:50%;border-radius: 2px 0px 0px 2px;color:#fff'	: 'border-radius: 10px 0px 0px 10px;background:#F5F5F5;width:50%;border-radius:0px 10px 10px 0px;'	"
				 @tap="zhishu(1)">{{$t('bico.W541')}}</view>
				<view class="zhushubox" :style="	index == 2	? ' background: #2196F3;width:50%;border-radius:  0px 2px 2px 0px;color:#fff'	: 'background:#F5F5F5;;width:50%;border-radius:  0 10px 10px 0; border-radius: 0px 10px 10px 0px;'	"
				 @tap="tuan(2)">{{$t('bico.W542')}}</view>
			</view>
			
			<view style="width: 96%;height: 80upx;background-color: #F8F8F8;display: flex;justify-content: space-between;line-height: 80upx;text-align: center;margin:20upx auto">
				<view class="zhushubox" style="border-right: 1upx solid #CCCCCC;width: 50%;">{{$t('bico.W543')}}{{sumCount}}{{$t('bico.W545')}}</view>
				<view class="zhushubox">{{$t('bico.W544')}}{{count}}{{$t('bico.W545')}}</view>
			</view>

			<!-- 成员记录 -->
			<view>
				<view v-for="(item, index) in index==1?zhishuList:feiList" :key="index" class="item" @click="handleEdite(item)">
					<view>
						<view class="item-row">
							<view style="margin-top: 5upx;">{{index + 1}}</view>
							<view style="margin-bottom: 8upx;margin-left: 40upx;">{{ item.account }}</view>
						</view>
						<view class="item-box">
							<!-- <view class="item-part">
								<view class="">{{$t('bico.ratio1')}}</view>
								<view class="">{{ item.spotRate }}</view>
							</view> -->
							<view class="item-part">
								<view class="">{{$t('bico.ratio2')}}</view>
								<view class="">{{ item.perRate }}</view>
							</view>
							<view class="item-part" style="margin-bottom: 8upx;">
								<view class="">{{$t('bico.ratio3')}}</view>
								<view class="">{{ item.rate }}</view>
							</view>
							<view class="item-part">
								<view class="">{{$t('bico.robotRate')}}</view>
								<view class="">{{ item.robotRate }}</view>
							</view>
						</view>
						<view style="margin-top: 20upx;">{{$t('bico.W546')}} {{ item.createTime }}</view>
					</view>
				</view>
				<!-- 加载更多提示 -->
				<!-- <view class="s-col is-col-24" v-if="list.length > 0">
					<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
				</view> -->
			</view>
			
			
		</view>
		
		<u-modal v-model="isEdite" :title="$t('bico.ratioTitle')" :zoom="false" @confirm="editeInfo" :show-cancel-button="true">
			<view class="modal-content">
				<!-- <view class="slot-content modal-item" >
					<view class="">{{$t('bico.ratio1')}}:</view>
					<view class="item-input">
						<u-input v-model="currentItem.spotRate" :border="true" type="text" :placeholder="$t('bico.ratioTitle1')"  />
					</view>
				</view> -->
				<view class="slot-content modal-item" >
					<view class="">{{$t('bico.ratio2')}}:</view>
					<view class="item-input">
					<u-input v-model="currentItem.perRate" :border="true" type="text" :placeholder="$t('bico.ratioTitle2')"  />
					</view>
				</view>
				<view class="slot-content modal-item">
					<view class="">{{$t('bico.ratio3')}}:</view>
					<view class="item-input">
					<u-input v-model="currentItem.rate" :border="true" type="text" :placeholder="$t('bico.ratioTitle3')"  />
					</view>
				</view>
				<view class="slot-content modal-item">
					<view class="">{{$t('bico.robotRate')}}:</view>
					<view class="item-input" style="width: 110px;" >
					<u-input v-model="currentItem.robotRate" :border="true" type="text" :placeholder="$t('bico.ratioTitle4')"  />
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {teamDetail,editeCommision } from '../../common/apiString.js'
	import {mapState,mapActions,mapGetters} from 'vuex';
	
	export default {
		data() {
			return {
				list: [],
				zhishuList:[],
				feiList:[],
				isEdite:false,
				currentItem:{},
				page: 1,
				size: 10,
				index: 1,
				show: false,
				count: 0,
				sumCount: 0,
				loadingType: 0,
				scrollTop: false,
				contentText: {
					contentdown: this.$t('bico.W547'),
					contentrefresh: this.$t('bico.W548'),
					contentnomore: this.$t('bico.W549'),
				}
			};
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		onLoad() {
			this.getmyTeam()
			uni.setNavigationBarTitle({
			  	title: this.$t('bico.W550'),
			})
		},
		onPullDownRefresh: function() {
		},
		methods: {
			// 编辑直属信息
			handleEdite(item){
				if(item.class == 1){
					this.currentItem = item;
					this.isEdite = true;
				}
			},
			// 编辑佣金信息
			editeInfo(){
				var that = this;
				that.$utils.initDataToken({url:editeCommision,data:{
					account:that.currentItem.email,
					rate: that.currentItem.rate,
					perRate:that.currentItem.perRate,
					// spotRate:that.currentItem.spotRate,
					robotRate:that.currentItem.robotRate
				},type:'POST'},(res,msg)=>{
					that.getmyTeam()
					that.isEdite = false;
				});
			},
			getmyTeam(){
				var that = this
				that.$utils.initDataToken({url:teamDetail,data:{size:10000},type:'POST'},(res,msg)=>{
					that.list = res.records
					that.sumCount=res.records.length;
					that.zhishuList = [];
					that.feiList = [];
					that.list.forEach(item=>{
						//var a=item.parentRefereeId.split("/")
						if(item.class ==1){
							console.log(item)
							that.zhishuList.push(item)
							console.log(111,that.zhishuList)
						}else{
							that.feiList.push(item)
							console.log(333,that.feiList)
						}
						if(item.validStatus=="Y"){
							that.count=that.count+1
						}
					})
					//that.count=that.zhishuList.length
				});
			},
			zhishu(nub) {
				this.index=nub
			},
			tuan(nub) {
				this.index=nub
			},
			
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
		},
		onPullDownRefresh: function() {
		}
	};
</script>

<style lang="scss">
	@import '../../static/css/index.css';

	page {
		background: #ffffff;
	}
	.modal-content{
		padding:30rpx 0;
	}
	.modal-item{
		width:90%;
		margin: 0 auto;
		display: flex;
		padding:20rpx;
	}
	.item-input{
		margin-left: 40rpx;
		width: 50%;
	}
	.header-imgsuo {
		position: absolute;
		top: 10upx;
		width: 28upx;
		height: 28upx;
		margin-right: 10upx;
		align-items: center;

	}

	.zhushubox {
		width: 50%;
		text-align: center;
	}

	.search_submit {
		width: 15%;
		margin-top: 50upx;
		height: 30px;
		line-height: 30px;
		background-color: #f92d60;
		color: #FFFFFF;
		float: right;
		font-size: 28upx;
		z-index: 30;
	}

	.icon-headerI {
		font-size: 12px;
		color: #999999;
		margin-left: 50upx;
	}

	uni-view {
		box-sizing: border-box;
		line-height: 2.6;
	}



	.item {
		background: white;
		padding: 32rpx;
		margin: 32rpx;
		font-size: 28rpx;
		box-shadow: 7px 9px 34px rgba(0, 0, 0, 0.1);
		border-radius: 16upx;
	}
	.item-row{
		color: #999999;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
	}
	.item-box{
		color: #999999;
		font-size: 28rpx;		
		.item-part{
			display: flex;
			justify-content: space-between;
			margin-top: 5rpx;
		}
	}
</style>
